<template>
	<view class="login">
		<view class="login-title">OUCer校园助手</view>
		<view class="login-content">
			<view class="login-username">
				<i class="el-icon-user"></i>
				<input type="text" placeholder="请输入账号" v-model="phone">
			</view>
			<view class="login-password">
				<i class="el-icon-key"></i>
				<input type="safe-password" name="" id="" placeholder="请输入密码" v-model="password">
			</view>
		</view>
		<view class="button"><button @click="loginUser">登录</button></view>
		<view class="login-botton">
			<view class="login-password" @click="findPassword">找回密码</view>
			<span>|</span>
			<view class="login-zhuce" @click="Registration">注册账号</view>
		</view>
		<!-- 其他的登录方式 -->
		<view class="login-other">
			<view class="login-top">
				其他的登录方式
			</view>
			<view class="login-icon">
				<image src="../../static/images/QQ.png" mode="widthFix"  @click="QQLogin"></image>
				<image src="../../static/images/weixin.png" mode="widthFix" @click="WechatLogin"></image>
			</view>
		</view>
	</view>
</template>

<script>
import axios from 'axios'

function loginUser(phone, password, callback) {//定义 登录函数
    if(phone === '' || password === '') {
        callback("内容不能为空哦！", null);
        return;
    }

    let data = {
        phone: phone,
        password: password
    };

    uni.request({
        url: '/api/login/loginUser',
        method: 'POST',
        data: data,
        success: function (res) {
            if (res.data.code === 200) {//如果成功，则使用用户数据执行回调
				const token = res.data.data.token; // 假设 token 在 res.data.data.token 中
				uni.setStorage({  
				     key: 'auth-token',  
				     data: token,  
				     success: function () {  
				     console.log('Token 保存成功');  
                callback(null, res.data.data.data);
            },
				fail: function (err) {  
					console.error('Token 保存失败', err);  
					callback("保存 Token 时发生错误", null);  
				}  
			});  
		} else {//如果不成功，则执行回调并显示错误消息
        callback(res.data.data.msg, null);
		}
	},
	fail: function (err) {
		callback("网络请求失败，请稍后重试", null);
		}
	});
}

function registerUser() {
    uni.navigateTo({
        url: '../../pages/register/zhuce/zhuce'
    });
}

function findPassword() {
    this.$router.push('/pages/login/findPassword');
}

module.exports = {
    loginUser: loginUser,
    registerUser: registerUser,
    findPassword: findPassword
};
//QQ
//将数据保存到本地
function saveTokenToLocal(token) {  
    try {  
        uni.setStorageSync('user_token', token);  
        console.log('登录凭证已保存到本地');  
    } catch (e) {  
        console.error('保存登录凭证到本地失败', e);  
    }  
}  
  
function getTokenFromLocal() {  
    try {  
        return uni.getStorageSync('user_token');  
    } catch (e) {  
        console.error('从本地获取登录凭证失败', e);  
        return null;  
    }  
}

const QQAuth = {  
    login: function(successCallback, errorCallback) {  
        uni.login({  
            provider: 'qq',  
            success: function(loginRes) {  
                let code = loginRes.code;  
                if (code) {  
                    uni.request({  
                        url: 'YOUR_BACKEND_TOKEN_ENDPOINT', // 后端接口地址，用于换取登录凭证  
                        method: 'POST',  
                        data: {  
                            code: code  
                        },  
                        success: function(tokenRes) {  
                            if (tokenRes.statusCode === 200) {  
                                let token = tokenRes.data.token; // 假设后端返回的数据结构中有token字段  
                                saveTokenToLocal(token); // 保存登录凭证到本地  
                                successCallback(tokenRes.data); // 调用成功回调，传递后端返回的用户信息  
                            } else {  
                                errorCallback('获取登录凭证失败：' + tokenRes.data.error || '未知错误');  
                            }  
                        },  
                        fail: function(err) {  
                            errorCallback('请求登录凭证失败：' + err.errMsg || '网络错误');  
                        }  
                    });  
                } else {  
                    errorCallback('登录失败，未获取到code');  
                }  
            },  
            fail: function(err) {  
                errorCallback('QQ登录失败：' + err.errMsg || '未知错误');  
            }  
        });  
    }  
};
//其他接口调用，先从本地存储中获取登录凭证，然后将其附加到请求头中发送请求
function fetchOtherData(url, successCallback, errorCallback) {  
    let token = getTokenFromLocal(); // 从本地获取登录凭证  
    if (!token) {  
        // 如果本地没有登录凭证，则提示用户登录或进行其他处理  
        errorCallback('请先登录');  
        return;  
    }  
  
    uni.request({  
        url: url,  
        method: 'GET',  
        header: {  
            'Authorization': 'Bearer ' + token // 假设后端使用Bearer Token进行认证  
        },  
        success: function(res) {  
            if (res.statusCode === 200) {  
                successCallback(res.data);  
            } else {  
                errorCallback('获取数据失败：' + res.data.error || '未知错误');  
            }  
        },  
        fail: function(err) {  
            errorCallback('请求数据失败：' + err.errMsg || '网络错误');  
        }  
    });  
}  

//微信
function saveTokenToLocal2(token) {  
    try {  
        uni.setStorageSync('user_token', token);  
        console.log('登录凭证已保存到本地');  
    } catch (e) {  
        console.error('保存登录凭证到本地失败', e);  
    }  
}  
  
function getTokenFromLocal2() {  
    try {  
        return uni.getStorageSync('user_token');  
    } catch (e) {  
        console.error('从本地获取登录凭证失败', e);  
        return null;  
    }  
}

const WeChatAuth = {  
    login: function(successCallback, errorCallback) {  
        uni.login({  
            provider: 'weixin',  
            success: function(loginRes) {  
                let code = loginRes.code;  
                if (code) {  
                    // 发送code到后端换取session_key和openid等  
                    uni.request({  
                        url: 'YOUR_BACKEND_WECHAT_LOGIN_ENDPOINT', // 后端接口地址，用于换取登录凭证  
                        method: 'POST',  
                        data: {  
                            code: code  
                        },  
                        success: function(tokenRes) {  
                            if (tokenRes.statusCode === 200) {  
                                let token = tokenRes.data.token; // 假设后端返回的数据结构中有token字段  
                                saveTokenToLocal2(token); // 保存登录凭证到本地  
                                successCallback(tokenRes.data); // 调用成功回调，传递后端返回的用户信息  
                            } else {  
                                errorCallback('获取登录凭证失败：' + tokenRes.data.error || '未知错误');  
                            }  
                        },  
                        fail: function(err) {  
                            errorCallback('请求登录凭证失败：' + err.errMsg || '网络错误');  
                        }  
                    });  
                } else {  
                    errorCallback('登录失败，未获取到code');  
                }  
            },  
            fail: function(err) {  
                errorCallback('微信登录失败：' + err.errMsg || '未知错误');  
            }  
        });  
    }  
};
function fetchOtherData2(ur2, successCallback, errorCallback) {  
    let token = getTokenFromLocal(); // 从本地获取登录凭证  
    if (!token) {  
        // 如果本地没有登录凭证，则提示用户登录或进行其他处理  
        errorCallback('请先登录');  
        return;  
    }  
  
    uni.request({  
        url: url,  
        method: 'GET',  
        header: {  
            'Authorization': 'Bearer ' + token // 假设您的后端使用Bearer Token进行认证  
        },  
        success: function(res) {  
            if (res.statusCode === 200) {  
                successCallback(res.data);  
            } else {  
                errorCallback('获取数据失败：' + res.data.error || '未知错误');  
            }  
        },  
        fail: function(err) {  
            errorCallback('请求数据失败：' + err.errMsg || '网络错误');  
        }  
    });  
}  

</script>

<style lang="less">
.login {
	 // background-image: linear-gradient(120deg, #05ee28, #6a3dad);
	 background-color: #fff;
	width: 100%;
	background-position: center;
	background-size: cover;
	// background-color: #464646;
	margin:0px;
	background-size:100% 100%;
	background-attachment:fixed;
	height: 1535rpx;
	opacity: 0.8;
	.login-title {
		padding-top: 150rpx;
		display: flex;
		justify-content: flex-start;
		margin-left: 50rpx;
		font-weight: 700;
		font-size: 40rpx;
		color: #2596ff;
		letter-spacing: 5rpx;
		margin-bottom: 50rpx;
	}
	.login-content{
		.login-username{
			display: flex;
			align-items: center;
		    margin: 0 50rpx;
			border-bottom: 1rpx solid gainsboro;
			input{
				padding: 10rpx;
				height: 60rpx;
				width: 80%;
			}
			i {
				color: #63c1ff;
				padding-right: 20rpx;
				font-size: 50rpx;
			}
		}
		.login-password{
			display: flex;
			align-items: center;
		    margin: 0 50rpx;
			border-bottom: 1rpx solid gainsboro;
			margin-top: 50rpx;
			input{
				padding: 10rpx;
				height: 60rpx;
				width: 80%;
			}
			i {
				color: #55aaff;
				padding-right: 20rpx;
				font-size: 50rpx;
			}
		}
	}
	.button{
		margin-top: 120rpx;
		
		button{
			background-color:#6999ff;
			width: 90%;
			height: 85rpx;
			text-align: center;
			line-height: 85rpx;
			color: #fff;
		}
	}
	.login-botton{
		display: flex;
		justify-content: center;
		margin-top: 100rpx;
		.login-password{
			padding: 0 15rpx;
			color: #63c1ff;
		}
		.login-zhuce{
			padding: 0 15rpx;
			color: #63c1ff;
		}
	}
	.login-other{
		position: absolute;
		bottom: 100rpx;
	    left: 37%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		.login-top{
			text-align:center;
		}
		.login-icon{
			display: flex;
			justify-content: space-between;
			margin-top: 50rpx;
			image{
				width: 80rpx;
			}
		}
	}
	
}
</style>



